<template>
  <div>
    <div v-if="readonly == false" style="text-align: right; width: 100%">
      <BaseButton type="primary" @click="addMsg">添加抄送配置</BaseButton>
    </div>
    <Table :data="msgList" :columns="columns" row-key="Id">
      <template #msgType="e">
        {{ getText(FlowMsgType, e.row.MsgType) }}
      </template>
      <template #receiveRange="e">
        {{ getText(FlowMsgReceiveRange, e.row.ReceiveRange) }}
      </template>
      <template #empName="e">
        <el-tag v-for="item in e.row.EmpName" :key="item">{{ item }}</el-tag>
      </template>
      <template #action="e">
        <BaseButton
          v-if="readonly == false"
          :icon="editIcon"
          size="small"
          type="primary"
          circle
          @click="editMsg(e.row)"
        />
        <BaseButton
          v-if="readonly == false"
          size="small"
          :icon="dropIcon"
          type="danger"
          circle
          @click="dropMsg(e.row)"
        />
      </template>
    </Table>
    <nodeMsgEdit
      :id="msgId"
      :form-id="formId"
      :flow-id="flowId"
      :node-id="nodeId"
      :nodes="nodes"
      v-model:visible="msgVisible"
      @close="closeMsg"
    />
  </div>
</template>

<script>
import { FlowMsgType, FlowMsgReceiveRange } from '@/flow/config/flowConfig'
import { Gets, Delete } from '@/flow/api/flowNodeMsg'
import nodeMsgEdit from './nodeMsgEdit.vue'
import Table from '@/components/Table/src/Table.vue'
import { useIcon } from '@/hooks/web/useIcon'
export default {
  components: {
    nodeMsgEdit,
    Table
  },
  props: {
    nodeId: {
      type: String,
      default: null
    },
    flowId: {
      type: String,
      default: null
    },
    formId: {
      type: String,
      default: null
    },
    nodes: {
      type: Array,
      default: null
    },
    readonly: {
      type: Boolean,
      default: false
    },
    isLoad: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      FlowMsgType,
      FlowMsgReceiveRange,
      msgId: null,
      msgVisible: false,
      dropIcon: useIcon({ icon: 'ep:delete' }),
      editIcon: useIcon({ icon: 'ep:edit' }),
      columns: [
        {
          field: 'MsgType',
          label: '消息类型',
          align: 'center',
          minWidth: 100,
          slotName: 'msgType'
        },
        {
          field: 'Show',
          label: '抄送说明',
          align: 'left',
          minWidth: 300
        },
        {
          field: 'action',
          label: '操作',
          align: 'left',
          width: 100,
          slotName: 'action'
        }
      ],
      msgList: []
    }
  },
  computed: {},
  watch: {
    isLoad: {
      handler(val) {
        if (val) {
          this.loadNodeMsg()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    addMsg() {
      this.msgId = null
      this.msgVisible = true
    },
    getText(list, val) {
      const item = list.find((c) => c.value === val)
      if (item == null) {
        return null
      }
      return item.text
    },
    editMsg(row) {
      this.msgId = row.Id
      this.msgVisible = true
    },
    dropMsg(row) {
      const title = '确认删除（' + row.TemplateName + '）消息?'
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDrop(row.Id)
      })
    },
    async submitDrop(id) {
      await Delete(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.loadNodeMsg()
    },
    closeMsg(isRefresh) {
      if (isRefresh) {
        this.loadNodeMsg()
      }
    },
    async loadNodeMsg() {
      this.msgList = await Gets(this.nodeId)
    }
  }
}
</script>
